import { addBanner } from '@/api/banner';
import { Button, Image, Input, Space } from 'antd';
import { useState, type FC, useRef } from 'react';
import { useNavigate } from 'react-router-dom';

interface BannerAddProps { }
// interface DataType {
//     img: string
//     link: string
//     alt: string
//   }

const BannerAdd: FC<BannerAddProps> = () => {
    const [alt,setAlt] = useState('')
    const [img,setImg] = useState('')
    const [link,setLink] = useState('')
    const imgRef:any=useRef()
    const navigate =useNavigate()
    return (
        <Space style={{ display: 'flex', width: '100%' }}>
            <Space direction='vertical' style={{ width: 700 }}>
                <Input placeholder='提示信息' value={alt} onChange={event => setAlt(event.target.value)}/>
                <Input placeholder='链接' value={link} onChange={event => setLink(event.target.value) }/>
                <input type="file"  ref={imgRef}  onChange={()=>{
                    const file = imgRef.current.files[0]
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = function () {
                        console.log(this);
                        setImg(this.result as string)
                      }
                }}/>
                <Input placeholder='图片地址' readOnly value={img} onChange={event => setImg(event.target.value) } ></Input>
                <Button type='primary' onClick={()=>{
                    const params ={
                        img,link,alt
                    }
                    addBanner(params).then((res)=>{
                        console.log(res.data);
                        if(res.data.code ==='200'){
                            navigate(-1)
                        }
                    })
                }}>添加</Button>
            </Space>
            <div style={{ width: '500px', height: '200px' }}>
                {
                    img ? <Image src={img} style={{ width: '500px', height: '200px' }} /> : null
                }
            </div>
            
        </Space>
    );
}

export default BannerAdd;
